<template>
   <div class="qtlist">
       <h4>供应基地管理</h4>
       <div class="container" style="">
             <div class="filter-box" style="margin-bottom:20px;">
                <div style="overflow:hidden;">
                    <el-button type="primary" size="mini" style="float:right" @click="search()">搜索</el-button>
                    <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;float:right">
                        <el-input placeholder="请输入供应基地名称" clearable
                                v-model="baseName" class="filter-input"
                                @keyup.enter.native="search()"></el-input>
                     </div>
                    <el-button  type="primary"  size="mini" 
                                style="float:left;" @click="addbase()">
                                新增基地</el-button>
                 </div>
             </div>
             <div class="table-box" style="padding:20px;border:1px solid #ddd;">
               <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column prop="baseName" label="基地名称" width="140" align="center"></el-table-column>
                    <el-table-column prop="baseAddress" label="地区" width="240" align="center">
                    </el-table-column>
                    <el-table-column prop="isDefault" label="默认地区" width="180" align="center">
                        <template  slot-scope="scope">
                            <el-switch  v-model="scope.row.defaultDis" 
                                        @click.native="forbidden(scope.row.id,scope.row.defaultDis)">
                            </el-switch>   
                        </template> 
                    </el-table-column>
                    <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleDetail(scope.row.id)">详情</el-button>
                                <el-button size="mini" type="warning" @click="handleEdit(scope.row.id)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDel( scope.row.id)">删除</el-button>
                            </template>
                   </el-table-column>
               </el-table> 
             </div>
              <div class="pagination" style="margin-bottom:0px;">
                    <el-pagination  background  layout="prev, pager, next" :total="total" 
                                    style="text-align:left;"
                                    @current-change="getPageNum">
                    </el-pagination>
              </div>
          
      </div>
  </div>  
</template>

<script>
import { baseList,delBase,update_baseStatus } from '@/request/api'
export default {
    data(){
        return {
            loading:true,
            data: [],
            value: '',
            baseName:'',
            total:0,
            pageSize:10,
            pageNum:1
        }
    },
    created(){
        this.get_baseList();
    },
    methods:{
      getPageNum(e){
           this.pageNum = e;
           this.get_baseList();
      },
      formatter(row, column){
        return row.address
      },
      //  新增
      addbase(){
          this.$router.push({
              path:'/base/addbase'
          })
      },
      get_baseList(){
          baseList({
              baseName:this.baseName,
              pageNum:this.pageNum,
              pageSize:this.pageSize
          }).then(res => {
              console.log(res);
              this.loading = false;
              this.total = res.total;
              this.data = res.rows;
          })
      },
      // 删除
      handleDel(id){
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delBase({
                 id:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.get_baseList()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
     // 编辑
      handleEdit(id){
           this.$router.push({
               path:`/base/edit/${id}`
           }) 
      },
     //   详情
      handleDetail(id){
           this.$router.push({
               path:`/base/detail/${id}`
           }) 
      },
      search(){
          this.get_baseList();
      },
      forbidden(id,status) {
            status =  !status;
            let info = status  ? '确认要取消默认基地吗吗':'确认要设置为默认基地吗'
            let msg = status   ? '取消成功':'设置成功!'
            let cancelMsg = status  ?'已取消关闭默认基地!':'已取消设置默认基地!'
            this.$confirm(info, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
            }).then(()=>{
                update_baseStatus({
                    id:id
                }).then(res=> {
                    if(res.code == 1) {
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                        this.get_baseList()
                    }
                    if(res.code == 0 ) {
                        this.$message({
                            type: 'info',
                            message: '很抱歉，只能设置一个默认基地'
                        });
                       this.get_baseList()
                    }
                })
            }).catch(()=>{
                this.$message({
                        type: 'info',
                        message: cancelMsg
                });  
                this.get_baseList()
            }) 
      }
    }
 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>